<template>
  <div>
    <h2>用户借款列表</h2>
    <table>
      <tr>
        <td>
          借款名称<input type="text" v-model="fenye.jname">
          借款利息<select v-model="fenye.lixi">
            <option  value="">请选择</option>
            <option  value="1%">1%</option>
            <option  value="2%">2%</option>
            <option  value="3%">3%</option>
            <option  value="4%">4%</option>
          </select>
          <input type="button" value="查询" @click="xian1()">
        </td>
      </tr>
    </table>
    <table border="1">
      <thead>
        <tr>
          <td>借款编号</td>
          <td>借款款项名称</td>
          <td>借款最高金额</td>
          <td>借款最高年限</td>
          <td>利息编号</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody v-for="em in info" :key="em.jid">
        <tr>
          <td>{{ em.jid }}</td>
          <td>{{ em.jname }}</td>
          <td>{{ em.maxprice}}</td>
          <td>{{ em.maxyear}}</td>
          <td>{{ em.lixi}}</td>
          <td><input type="button" value="用户借款明细" @click="jiekuan(em.jid)"></td>
        </tr>
      </tbody>
    </table>
<span>一共{{fenye.totalcount}}条数据，每页显示{{ fenye.pagesize }}条数据，一共{{ fenye.pagecount }}页，当前第{{ fenye.pageindex }}页</span>
<a href="#" @click="page(1)">首页</a>
<a href="#" @click="page(fenye.pageindex-1)">上一页</a>
<a href="#" @click="page(fenye.pageindex+1)">下一页</a>
<a href="#" @click="page(fenye.pagecount)">尾页</a>
<Select v-model="fenye.pagesize" >
  <option value="">请选择</option>
  <option value="2">每页显示2条</option>
  <option value="3">每页显示3条</option>
  <option value="4">每页显示4条</option>
</Select>
  </div>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import axios from 'axios'
import { useRouter } from 'vue-router';
const router = useRouter()
const info=ref([{
  jid:0,
  jname:"",
  maxprice:"",
  maxyear:"",
  lixi:"",
}])
const fenye=ref({
  jname:"",
  lixi:"",
  pageindex:1,
  pagesize:3,
  pagecount:0,
  totalcount:0,
})
//分页
const page=(i:any)=>{
if(i>=1||i<=fenye.value.pagecount)
{
  fenye.value.pageindex=i;
  xian();
}
}
//dd
// const dd=(i:any)=>{
//   fenye.value.pagesize=i;
//   fenye.value.pageindex=1;
//   xian();

// }


//钩子函数
onMounted(()=>{
xian();
})


//查询事件按钮
const xian1=()=>{
  fenye.value.pageindex=1;
  xian();
}
//显示
function xian()
{
  axios({
    url:"http://localhost:18964/api/CF/xianshi",
    method:"get",
    params:{
      jname:fenye.value.jname,
      lixi:fenye.value.lixi,
      pageindex:fenye.value.pageindex,
      pagesize:fenye.value.pagesize,
    },
  }).then(res=>{
    info.value=res.data.b;
    //接收后台传过来的值
    fenye.value.pagecount=res.data.pagecount;
    fenye.value.totalcount=res.data.totalcount;

  })
}


//借款
function jiekuan(jid:any){
  router.push("MingxiView");
}


</script>

<style scoped>

</style>